<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>

<!--新增字典模态框-->
<div class="modal fade" id="saveWindow" role="dialog">
    <div class="modal-dialog" role="document" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">新增字典值</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="saveForm">

                    <div class="form-group">
                        <label for="create-dicTypeCode" class="col-sm-2 control-label">字典类型<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control selectTypeCode" id="create-dicTypeCode" style="width: 200%;"></select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-value" class="col-sm-2 control-label">字典值<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-value" style="width: 200%;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-text" class="col-sm-2 control-label">文本<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-text" style="width: 200%;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-orderNo" class="col-sm-2 control-label">排序号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-orderNo" style="width: 200%;">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>

<!--编辑字典模态框-->
<div class="modal fade" id="editWindow" role="dialog">
    <div class="modal-dialog" role="document" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">编辑字典值</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="editForm">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-dicTypeCode" class="col-sm-2 control-label">字典类型</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-dicTypeCode" style="width: 200%;" value="性别" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-value" class="col-sm-2 control-label">字典值</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-value" style="width: 200%;" value="m" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-text" class="col-sm-2 control-label">文本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-text" style="width: 200%;" value="男">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-orderNo" class="col-sm-2 control-label">排序号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-orderNo" style="width: 200%;" value="1">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="edit()">保存</button>
            </div>
        </div>
    </div>
</div>



<!--======================顶部导航栏==============================-->
<ol class="breadcrumb">
    <li><a href="#">设置</a></li>
    <li><a href="#">权限</a></li>
    <li class="active">字典值列表</li>
</ol>

<!--======================查询系列组件==============================-->
<div class="well well-sm" style="height: 54px; left:12px; width: 98.4%;">
    <form class="form-inline" id="searchForm">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">字典类型名称</div>
                <select id="typeCode" class="form-control selectTypeCode"></select>
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default" onclick="$('#tab').bootstrapTable('refresh');"><span
                class="glyphicon glyphicon-search"></span> 搜索
        </button>
        &nbsp;
        <button type="button" class="btn btn-default"
                onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');"><span
                class="glyphicon glyphicon-refresh"></span> 清空
        </button>
    </form>
</div>

<!--======================操作系列组件==============================-->
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#saveWindow">
            <span class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button type="button" class="btn btn-danger" onclick="removeBatch()"><span class="glyphicon glyphicon-minus"></span> 批量删除</button>
    </div>
</div>


<div style="position: relative; left: 10px; top: 40px; width: 98%">
    <table id = "tab"></table>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js "></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function (){
        initTable();
        initSelect();
    })
    $('#saveWindow').on('hidden.bs.modal', function () {
        $('#saveForm')[0].reset();
    });
    $('#editWindow').on('hidden.bs.modal', function () {
        $('#editForm')[0].reset();
    });

    // 表格初始化
    function initTable() {
        //调用配置异步表格的方法
        $('#tab').bootstrapTable({
            //=========== 表格配置项===============
            // http 请求方式
            method: 'get',
            // 请求路径
            url: 'dicValue/page',
            // 开启分页
            pagination: true,
            // 设置分页的位置 server 服务器端分页  local 前端分页
            sidePagination: 'server',
            // 设置每页条数
            pageSize: 5,
            // 设置每页条数列表
            pageList: [5, 10, 20, 50],
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            // 查询时的参数
            queryParamsType: '',
            queryParams: function (params) {
                // 获取自定义的请求参数
                 params.typeCode = $('#typeCode').val();
                 return params;
            },
            // 处理响应的格式
            responseHandler: function (res) {
                if (res.code == 0) {
                    // 如果开启分页
                    return {
                        rows: res.data.list,
                        total: res.data.total
                    }
                }
            },
            // 表各种的列元素描述
            columns: [
                {
                    //复选框
                    checkbox: true
                }, {
                    field: 'id',
                    visible:false
                },{
                    //列名
                    title: '字典值',
                    field: 'value',
                    halign: 'center'
                }, {
                    //列名
                    title: '文本',
                    field: 'text',
                    halign: 'center'
                },{
                    //列名
                    title: '排序号',
                    field: 'orderNo',
                    halign: 'center'
                },{
                    //列名
                    title: '类型编码',
                    field: 'typeCode',
                    halign: 'center'
                }, {
                    //列名
                    title: '类型名称',
                    field: 'typeName',
                    halign: 'center'
                }, {
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: function (value, row) {
                        return '<button type="button" class="btn btn-warning btn-sm"  onclick="openEdit(\'' + row.id + '\')"><span class="glyphicon glyphicon-edit"></span> 编辑</button>' +
                            '&emsp;' + '&emsp;' + '<button type="button" class="btn btn-danger btn-sm" onclick="remove(\'' + row.id + '\')"><span class="glyphicon glyphicon-remove"></span> 删除</button>';
                    }
                }
            ]
        });
    }

    // 初始化下拉列表关联数据
    function initSelect() {
        $.ajax('dicType/list',{
            type:'get',
            success: function (res) {
                if(res.code == 0){
                    var str = '<option value=""></option>';
                    $.each(res.data, function () {
                        str += '<option value="'+ this.code +'">'+ this.name +'</option>';
                    });
                    $('.selectTypeCode').html(str)
                }
            }
        })
    }

    // 新增
    function save() {
        $.ajax('dicValue/save', {
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
                value: $('#create-value').val(),
                text: $('#create-text').val(),
                orderNo: $('#create-orderNo').val(),
                typeCode: $('#create-dicTypeCode').val(),
            }),
            beforeSend: function () {
                var value = $('#create-value').val();
                if (!value) {
                    alert("未填写字典值");
                    return false;
                }
                var text = $('#create-text').val();
                if (!text) {
                    alert("未填写文本内容");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    alert("新增成功");
                    $('#tab').bootstrapTable('refresh');
                    $('#saveWindow').modal('hide');

                } else {
                    alert(res.message);
                }
            }
        })
    }

    // 打开修改
    function openEdit(id) {
        $.ajax('dicValue/find/' + id, {
            type: 'get',
            success: function (res) {
                if (res.code == 0) {
                    $('#edit-id').val(res.data.id);
                    $('#edit-dicTypeCode').val(res.data.typeCode);
                    $('#edit-value').val(res.data.value);
                    $('#edit-text').val(res.data.text);
                    $('#edit-orderNo').val(res.data.orderNo);
                    // 打开窗体
                    $('#editWindow').modal('show');
                }
            }
        })
    }

    // 修改
    function edit() {
        $.ajax('dicValue/edit', {
            type: 'put',
            contentType: 'application/json',
            data: JSON.stringify({
                id:$('#edit-id').val(),
                value:$('#edit-value').val(),
                text: $('#edit-text').val(),
                orderNo: $('#edit-orderNo').val(),
                typeCode: $('#edit-dicTypeCode').val(),
            }),
            beforeSend: function () {
                var text = $('#edit-text').val();
                if (!text) {
                    alert("未填写文本内容");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    alert("修改成功");
                    $('#tab').bootstrapTable('refresh');
                    $('#editWindow').modal('hide');
                } else {
                    alert(res.message);
                }
            }
        })
    }

    // 删除
    function remove(id) {
        if (confirm("确定要删除该条数据吗?")) {
            $.ajax('dicValue/delete/' + id, {
                type: 'delete',
                success: function (res) {
                    if (res.code == 0) {
                        alert("删除成功");
                        // 刷新页面
                        $('#tab').bootstrapTable('refresh');
                    } else {
                        alert(res.message);
                    }
                }
            })
        }
    }

    // 批量删除
    function removeBatch() {
        //获取用户的选择
        var rows = $('#tab').bootstrapTable('getSelections');
        if (rows.length == 0) {
            alert("请选择要删除的数据");
        } else {
            if (!confirm("确定要删除数据吗?")) {
                return;
            }
            var ids = [];
            $.each(rows, function () {
                ids.push(this.id);
            })
            $.ajax('dicValue/delete', {
                type: 'post',
                data: {
                    _method: 'delete',
                    ids: ids.join()
                },
                success: function (res) {
                    if (res.code == 0) {
                        alert("删除成功");
                        // 刷新页面
                        $('#tab').bootstrapTable('refresh');
                    } else {
                        alert(res.message);
                    }
                }
            })
        }
    }
</script>
</body>
</html>